<template>
  <div class="xgplayer">
   <div id="mse"></div>
  </div>
</template>

<script>
import Player from "xgplayer";
// import { loadVideoList } from "@/api/video";
export default {
  name: "xgplayer",
  data() {
    return {
      videoList: [],
      dom: []
    };
  },
  mounted() {
	 
      this.initPlayer('https://fbzh-wage.oss-cn-hangzhou.aliyuncs.com/THG/163126050000801.mp4')
    // this.setBaseList();
  },
  methods: {
    // 设置视频配置(注意：initPlayer应放在异步函数里或mounted之后，不可在created里直接加载，否则不生效)
    initPlayer (url) {
      this.$nextTick(res => {
        this.Player = new Player({
          // el、url为必选配置，其它为可选配置
          id: 'mse',
          url: url,
          width: '100%',
          volume: 0.6, // 初始音量
          autoplay: false, // 自动播放
          playbackRate: [0.5, 0.75, 1, 1.5, 2], // 当前播放速度
          poster: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F9fo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2Fb3fb43166d224f4a5263878b0ff790529922d1b4.jpg&refer=http%3A%2F%2Fgss0.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637980244&t=00426057b60c05ee450902bdbc6662cd',
          defaultPlaybackRate: 1, // 播放速度设置为1
          playsinline: true,
          // rotate: {
          //   clockwise: true,
          //   innerRotate: true
          // },
          miniplayerConfig: {
            bottom: 200,
            right: 0,
            width: 320,
            height: 180
          },
          'x5-video-player-fullscreen': true,
          'x5-video-orientation': 'landscape'
        })
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.card {
  width: 18%;
  margin: 0 20px 20px 0;
  float: left;
}
.title {
  width: 100%;
  color: #000;
  height: 40px;
  line-height: 40px;
  background-color: #ffffff;
  font-weight: 600;
  padding-left: 10px;
}
</style>
